import React from 'react'
import {View, Text, StyleSheet, ViewStyle} from 'react-native'
import {commonStyle, translateSize, themeColors} from 'styles'

const ShortBar: React.FC<{title?: string; style?: ViewStyle}> = props => {
  return (
    <View style={[commonStyle.containerRow, styles.container, props.style]}>
      <View style={commonStyle.shortBar} />
      {props.title ? <Text style={styles.title}>{props.title}</Text> : <React.Fragment />}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  title: {
    paddingLeft: translateSize(20),
    fontSize: translateSize(32),
    fontWeight: 'bold',
    textAlign: 'center',
    color: themeColors.title,
  },
})

export default ShortBar
